<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8"/>
        <title>consumers</title>
    </head>

    <body>
        <div th:include="top :: html"></div>
        <div class="contentDiv">

            <table class="table table-hover table-condensed">
                <legend>
                    <strong>/consumers</strong>
                </legend>
                <thead>
                    <tr>
                        <th>id</th>
                        <th>username</th>
                        <th>acl_group</th>
                        <th>custom_id</th>
                        <th>created_at</th>
                        <th>operate</th>
                    </tr>
                </thead>
                <tbody>
                    <tr th:each="consumer : ${consumers}">
                        <th scope="row" th:text="${consumer.id}"></th>
                        <td th:text="${consumer.username}"></td>
                        <td class="acl_group" th:consumer_id="${consumer.id}"></td>
                        <td th:text="${consumer.custom_id}"></td>
                        <td th:text="${#dates.format(consumer.created_at * 1000, 'yyyy-MM-dd HH:mm:ss')}"></td>
                        <td>
                            <a class="btn btn-info" th:href="@{'/kong/consumers/' + ${consumer.username} + '/acl'}">acl</a>
                            <a class="btn btn-info" th:href="@{'/kong/consumers/' + ${consumer.username} + '/jwt'}">jwt</a>
                            <a class="btn btn-primary" th:href="@{'/kong/consumers/' + ${consumer.id}}">update</a>
                            <a class="btn btn-danger btn-delete" href="javascript:void(0)" th:value="${consumer.id}">delete</a>
                        </td>
                    </tr>
                </tbody>
            </table>

            <div><a class="btn btn-primary" href="/kong/consumers/add" role="button">add consumer</a></div>
        </div>
        <script type="application/javascript">
            $(function(){
                $('.btn-delete').click(function(){
                    if(!confirm("Make sure to delete this?")){
                        return;
                    }
                    var consumer_id = $(this).attr('value');
                    var url = "/kong/consumers/" + consumer_id + "/del";
                    $.ajax({
                        url: url,
                        async: false,
                        type: "delete",
                        success: function(){
                            window.location.reload();
                        },
                        error: function(e){
                            alert(e.message);
                            window.location.reload();
                        }
                    })
                });
                var map = {};
                var aclResponse = $.ajax({url:"/kong/all_acls",async:false});
                var aclJson = aclResponse.responseText;
                var aclObjs = eval('(' + aclJson + ')');
                for(var i=0; i<aclObjs.length; i++){
                    var consumer_id = aclObjs[i].consumer.id;
                    if(map[consumer_id] == null){
                        map[consumer_id] = aclObjs[i].group;
                    }else{
                        map[consumer_id] = map[consumer_id] + "," + aclObjs[i].group;
                    }
                }

                $('.acl_group').each(function(){//replace service_id to serviceName
                    var this_consumer_id = $(this).attr('consumer_id');
                    $(this).text(map[this_consumer_id]);
                })
            })
        </script>
    </body>
</html>